<script setup>
import { reactive, ref, toRefs } from 'vue';
import { Search } from '@element-plus/icons-vue';
import Pagination from '@/components/Pagination/index.vue';
const showDialog = ref(false);
const currentRow = ref();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['update:modelValue']);

const total = ref(20);
const tableData = [
  {
    id: 1,
    orderNo: 'Tom',
    createTime: '2016-05-03',
    file: 'DH_MB_V6_xxxx.zip',
    type: 'FR-4',
    status: '已确认收货',
  },
  {
    id: 2,
    orderNo: 'Tom',
    createTime: '2016-05-03',
    file: 'DH_MB_V6_xxxx.zip',
    type: 'FR-4',
    status: '已确认收货',
  },
  {
    id: 3,
    orderNo: 'Tom',
    createTime: '2016-05-03',
    file: 'DH_MB_V6_xxxx.zip',
    type: 'FR-4',
    status: '已确认收货',
  },
];
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderNo: undefined,
  },
});
const { queryParams } = toRefs(data);
const radio = ref();
const onClose = () => {
  emits('update:modelValue', false);
};

const handleQuery = () => {};

const handleCurrentChange = (row) => {
  currentRow.value = row;
  radio.value = row?.id;
};

// const getList = () => {};
</script>

<template>
  <div class="select-modal">
    <!-- 创建渠道弹窗 -->
    <el-dialog v-model="props.modelValue" title="选择PCB的订单号" center :before-close="onClose">
      <el-row type="flex" justify="end">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item prop="orderNo" style="margin-bottom: 12px">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="搜索您的订单编号"
              clearable
              style="width: 254px"
              @keyup.enter="handleQuery"
            >
              <template #suffix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="tableData" @current-change="handleCurrentChange" border style="width: 100%">
        <el-table-column width="50px" align="center">
          <template #default="scope">
            <el-radio v-model="radio" :label="scope.row.id">
              <span></span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column prop="file" label="PCB文件名" />
        <el-table-column prop="type" label="产品类别" />
        <el-table-column prop="status" label="订单状态" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <template #footer>
        <span class="dialog-footer">
          <el-button palin @click="onClose">{{$t('smt.Cancel')}}</el-button>
          <el-button type="primary" @click="handleSubmit(channelRef)">{{$t('smt.Define')}}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
